<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!-- 导入boot文件，顺序固定	 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/comm.css"/>
    <link rel="stylesheet" href="../css/me.css"/>
    <script src="../js/vue.js"></script>
</head>
<body>
<header>
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
</header>
    <div id="app">
        <div class="container-fluid">
            <div class="row w-100">
                <!-- 左侧-->
                <div class="col-md-2 col-sm-0 pl-5 pr-4" id="left">
                    <div >
                        <ul class="list-unstyled list-group " class="itemList">
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="checkOpt(1)">已发布</a></li>
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="checkOpt(2)">已点赞</a></li>
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="checkOpt(3)">去发布</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-10 col-sm-12">
                    <div class="row w-100 ml-5">
                        <div class="col-md-8 col-sm-12 row" id="userInfo">
                            <img :src="img" />
                            <div class="username">
                                {{username}}
                                </br>
                                <h6>{{sign}}</h6>
                            </div>
                            
                            <span class="articleInfo ">
                                <div>
                                    {{like}}
                                    </br>
                                    收到的赞
                                </div>
                                <div>
                                    {{count}}
                                    </br>
                                    共计发布
                                </div>
                            </span>
                        </div>
                        <div class="col-md-8 col-sm-12 " id="middle">
                            <div class="border-bottom text-center mt-3">
                                <h4>已发布</h4>
                            </div>
                            <div class="col-11" v-for="plant in plants" ::key="plant.author_id" id="carList">
                                <div class="media p-sm-3 w-100 ">
                                    <img :src="plant.image_path" alt="图片丢了" class="mr-4"/>
                                    <div class="media-body">
                                        <a :href="`detail.html?id=`+plant.plant_id">
                                            <h5>{{plant.title}}</h5>
                                        </a>
                                        <p>{{plant.text}}</p>
                                        <div class="d-flex justify-content-between">
                                            <p class="text-muted">
                                                <span class="text-success">{{plant.posted_date}}</span>&nbsp;<span>/</span>&nbsp;阅读({{plant.read_count}})
                                            </p>
                                            <div>点赞（{{plant.like_count}}）</div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                           
                                            <div v-if="opt==1">
                                                <button  class="btn btn-outline-danger" @click="deleteById(plant.plant_id)">刪除</button>
                                                <button  class="btn btn-outline-primary" @click="toUpdate(plant.plant_id)">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center m-5 " id="more"><a @click="loadingMore">{{text}}</a></div>
                            
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
       
    </div>
</body>
<script>
     new Vue({
        el: "#app",
        data: {
            hello:"hello world", // 没用
            plants:[],// 文章列表
            like:"",// 点赞数
            count:"",// 文章数统计
            username:"", // 用户名
            sign:"",// 签名
            img:"",// 头像
            page:1,//当前页数
            id:"",// 用户id
            text:"加载更多...",// 底部内容提示
            opt:1// 切换当前浏览的地方（已发布，已点赞，去发布）

        },
        //网页一进来就调用
        created() {
            // 从session用户的各种信息
            this.img = sessionStorage.getItem("titleImg")
            this.username = sessionStorage.getItem("username")
            this.sign = sessionStorage.getItem("sign")
            this.id = sessionStorage.getItem("id")
            // 获取用户的文章数据
            this.getPlants()
            // 获取收货点赞和总文章统计
            this.numberAndReadCount()
        },
        // 方法全部写在这
        methods: {
            //修改
            toUpdate(plantId){
                // 点击修改时候传入文章id跳转富文本界面
                window.location.href = "/html/add.html?id="+plantId
            },
            // 刪除
            async deleteById(plantId){
                const response = await fetch('http://localhost:5000/plants/delete?id='+plantId);
                const data = await response.json();
                if(data.code == 200){
                    alert("刪除成功")
                    setTimeout(function(){
                        location.reload()
                    },1000)
                }
            },
            // 統計數據
            async numberAndReadCount(){
                const response = await fetch('http://localhost:5000/user/getUserCount?id='+this.id);
                const data = await response.json();
                this.like = data.data.like
                this.count = data.data.count
            },
            // 加载更多
            loadingMore(){
                this.page +=1
                this.getPlants()
            },
            // 获取数据
            async getPlants(){
                // 获取本人所有发布文章
                if(this.opt == 1){
                    const response = await fetch('http://localhost:5000/user/getPlants?id='+this.id+'&page='+this.page);
                    const data = await response.json();
                
                    if(data.code == 200){
                        var valuesArray = Object.values(data.data);
                        this.plants = [...this.plants, ...valuesArray];
                        this.text = "加载更多.."
                    }else{
                        this.text = "没有数据了"
                    }
                // 获取已点赞的文章
                }else if(this.opt == 2){
                    const response = await fetch('http://localhost:5000/user/getLikes?id='+this.id+'&page='+this.page);
                    const data = await response.json();
                
                    if(data.code == 200){
                        var valuesArray = Object.values(data.data);
                        this.plants = [...this.plants, ...valuesArray];
                        this.text = "加载更多.."
                    }else{
                        this.text = "没有数据了"
                    }
                }
            },
            // 这个是切换opt状态(已发布，已点赞，去发布)
            checkOpt(e){
                if(e!=3){
                    this.opt = e
                    this.plants = []
                    this.getPlants();
                }else if(e==3){
                    window.location.href="/html/add.html"
                }
            }
        },
      
    })

</script>
</html>